<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>面试管理</title>
    <link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/面试结果登记.css" />
    <link rel="icon" type="image/png" href="icon/I.png">
    <script src="layui/src/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<style>
    table tr th{
        text-align: center !important;
        font-weight: bold !important;
    }
    tr td{
        text-align: center
    }
</style>
<script th:inline="javascript">

    function openModak(thisA){
        i = $(thisA).parents("tr").children("td").eq(0).text();
        var list=[[${list}]]
        console.log(list[i].haspower)
        let split = list[i].haspower.split("-");
        console.log(split)
        $("#motai").html("")
        if (split.indexOf("1")!=-1){
            $("#motai").append("<input type=\"text\" class=\"layui-input filepath\"style='text-align: center;font-size: 25px'  value=\"系统设置\" readonly>")
        }
        if (split.indexOf("2")!=-1){
            $("#motai").append("    <input type=\"text\" class=\"layui-input filepath\"style='text-align: center;font-size: 25px'  value=\"人事管理\" readonly>")
        }

        if (split.indexOf("3")!=-1){
            $("#motai").append("     <input type=\"text\" class=\"layui-input filepath\" style='text-align: center;font-size: 25px' value=\"薪酬管理\" readonly>")
        }

        if (split.indexOf("4")!=-1){
            $("#motai").append("     <input type=\"text\" class=\"layui-input filepath\" style='text-align: center;font-size: 25px' value=\"招聘管理\" readonly>")
        }
        if (split.indexOf("5")!=-1){
            $("#motai").append("     <input type=\"text\" class=\"layui-input filepath\" style='text-align: center;font-size: 25px' value=\"培训管理\" readonly>")
        }
        if (split.indexOf("6")!=-1){
            $("#motai").append("     <input type=\"text\" class=\"layui-input filepath\"style='text-align: center;font-size: 25px'  value=\"数据分析\" readonly>")
        }
        layui.use(['layer'],function () {
            var layer = layui.layer,$=layui.$;
            layer.open({
                type:1,//类型
                area:['400px','600px'],//定义宽和高
                title:'权限列表',//题目
                shadeClose:true,//点击遮罩层关闭
                content: $('#motaikunag'),//打开的内容
                skin:"layui-layer-molv"
            });
        })

    }

    function  openUpPower(thisB) {
        $("#1").removeAttr("checked");
        $("#2").removeAttr("checked");
        $("#3").removeAttr("checked");
        $("#4").removeAttr("checked");
        $("#5").removeAttr("checked");
        $("#6").removeAttr("checked");
        i = $(thisB).parents("tr").children("td").eq(0).text();
        var list=[[${list}]]
        console.log(list[i].haspower)
        let split = list[i].haspower.split("-");
        if (split.indexOf("1")!=-1){
            $("#1").attr("checked","checked");
        }
        if (split.indexOf("2")!=-1){
            $("#2").attr("checked","checked");
        }
        if (split.indexOf("3")!=-1){
            $("#3").attr("checked","checked");
        }
        if (split.indexOf("4")!=-1){
            $("#4").attr("checked","checked");
        }
        if (split.indexOf("5")!=-1){
            $("#5").attr("checked","checked");
        }
        if (split.indexOf("6")!=-1){
            $("#6").attr("checked","checked");
        }

        layui.use(['layer'],function () {
            var layer = layui.layer,$=layui.$;
            layer.open({
                type:1,//类型
                area:['400px','600px'],//定义宽和高
                title:'修改权限',//题目
                shadeClose:true,//点击遮罩层关闭
                content: $('#motaikunag2'),//打开的内容
                skin:"layui-layer-molv"
            });
        })
    }
    function upPower() {
        var haspower=''
        $("input:checkbox[name=power]:checked").each(function () {
            let id = $(this).attr("id");
             haspower+=id+="-"
        })
        var list=[[${list}]]
        let id1 = list[i].id;
        console.log(haspower)
        var jsonA={
            'id':id1,
            'haspower':haspower
        }
        $.getJSON("upHasPower",jsonA,function (dataA) {
                if (dataA==true){
                    alert("修改权限成功！")
                    top.location.reload()
                }else {
                    alert("修改权限失败！")
                }
        })
    }

</script>
<body style="background: rgb(241, 241, 241) !important;">
<br>
<div id="box1" style="width: 98%; margin: 0 auto">
    <form class="layui-form">

        <table class="layui-table" id="positionData">
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户年龄</th>
                <th>用户角色</th>
                <th>用户部门</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
            <tr th:each="l,i:${list}">
                <td hidden th:text="${i.index}"></td>
                <td th:text="${l.getId()}"></td>
                <td th:text="${l.getUserRole().getName()}"></td>
                <td th:text="${l.getUserRole().getAge()}"></td>
                <td th:text="${l.getUserRole().getRole()}"></td>
                <td th:text="${l.getUserRole().getDepartment()}"></td>
                <td th:text="${l.getUserRole().getPhone()}"></td>
                <td style="display: none" th:text="${l.getHaspower()}"></td>
                <td><button type="button" class="layui-btn layui-btn-sm" th:text="查看权限" onclick="openModak(this)"></button><button type="button" class=" layui-btn layui-btn-sm " th:text="修改权限" onclick="openUpPower(this)"></button></td>
            </tr>
        </table>

    </form>
</div>
<div id="motaikunag" style="display: none;" th:align="center">
    <div class="layui-row" >
        <div id="motai" style="margin-top: 50px;">
        </div>
    </div>
</div>

<div id="motaikunag2" style="display: none;" th:align="center">
    <div class="layui-row" >
        <div>
            <table id="motai2" style="margin-top: 100px; border-spacing: 5px 10px;border-collapse: separate;" class="layui-table-cell">
                <tr style="font-size: 25px"><td>系统设置</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="1"></td></tr>
                <tr style="font-size: 25px"><td>人事管理</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="2"></td></tr>
                <tr style="font-size: 25px"><td>薪酬管理</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="3"></td></tr>
                <tr style="font-size: 25px"><td>招聘管理</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="4"></td></tr>
                <tr style="font-size: 25px"><td>培训管理</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="5"></td></tr>
                <tr style="font-size: 25px"><td>数据分析</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="power" type="checkbox" id="6"></td></tr>
            </table>
            <br><br><br><br>
            <input type="button" value="确认修改" class="layui-btn layui-btn-normal" onclick="upPower()">
        </div>
    </div>
</div>


</body>
<script>
    layui.use('form', function() {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });
</script>
</html>
